<template>
  <div class="container box">
    <!-- 查询表单 -->
    <div class="search_form">
      <div>
        <el-input v-model="searchForm.rolename" size="mini" clearable placeholder="请输入角色名称"></el-input>
        <el-input v-model="searchForm.roleCode" size="mini" clearable placeholder="请输入权限字符" class="roleCode"></el-input>
        <el-select v-model="searchForm.rgroupid"  size="mini" clearable placeholder="请选择角色组" class="roleCode">
          <el-option :label="item.groupName" :value="item.id" v-for="item in roleGroup" :key="item.id"></el-option>
        </el-select>
        <el-button class="btn_search" size="mini" type="primary" icon="el-icon-search" @click="searchRoleForm">查询</el-button>
      </div>

      <el-button v-hasPermi="['basicDataSubsystem:rolemanage:roleInsert']" size="mini" type="primary" icon="el-icon-plus" @click="handleAdd">新建</el-button>
    </div>

    <!-- 角色管理表格 -->
    <BaseTable :data="cargotableData" :columns="cargotableDataColumns" :tableHeight="tableHeight" :pagination="false" :loading="loading"></BaseTable>

    <!-- 分页 -->
    <div class="card_pagination">
      <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="totalPageNum" :current-page="startpage" :page-size="pageSize" :page-sizes="[10, 15, 30, 50]" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
    </div>

    <!-- 角色成员 -->
    <el-drawer title="角色成员" :visible.sync="roleDrawer" :direction="direction" size="50%" :before-close="handleClose">
      <div class="search_input">
        <el-input placeholder="查找用户" v-model="searchInput" style="width:150px; margin-right:16px" size="mini" clearable></el-input>
        <el-button class="btn_search" size="mini" type="primary" icon="el-icon-search" @click="searchRoleName">查询</el-button>
      </div>

      <BaseTable :data="cargotableData1" :columns="cargotableDataColumns1" :tableHeight="tableHeight" :pagination="false" :loading="loading"></BaseTable>

      <div class="record">
        <!-- 角色成员分页 -->
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="roleTotalPageNum" :current-page="rolePageNum" :page-size="rolepageSize" :page-sizes="[10, 15, 30, 50]" @size-change="handleRoleSizeChange" @current-change="handleRoleCurrentChange"></el-pagination>
      </div>
    </el-drawer>
    <!-- 添加角色表单 -->
    <el-drawer title="添加角色" :visible.sync="addDrawer" :direction="direction" @close="addDrawerClose" size="30%" :before-close="handleClose">
      <div class="form_box">
        <el-form :model="addForm" :rules="rulesAddForm" ref="roleFormRef" label-width="100px" class="demo-ruleForm">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="addForm.roleName" @input="addForm.roleName=verifyfilter('char_',addForm.roleName)"></el-input>
          </el-form-item>
          <el-form-item label="权限字符" prop="roleCode">
            <el-input v-model="addForm.roleCode" @input="addForm.roleCode=verifyfilter('char_',addForm.roleCode)"></el-input>
          </el-form-item>

          <el-form-item label="角色组" prop="rgroupId">
            <el-select v-model="addForm.rgroupId" placeholder="请选择角色组" style="width:100%">
              <el-option :label="item.groupName" :value="item.id" v-for="item in roleGroup" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="显示顺序" prop="sortNum">
            <el-input v-model="addForm.sortNum" @input="
                  addForm.sortNum = verifyfilter('number', addForm.sortNum)
                "></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-switch v-model="addForm.state" active-value="0" inactive-value="1"></el-switch>
          </el-form-item>
        </el-form>
      </div>
      <div class="demo-drawer__footer">
        <el-button type="primary" size="small" @click="onSubmit()">保 存</el-button>
      </div>
    </el-drawer>

    <!-- 编辑用户对话框 -->
    <el-drawer title="修改角色" :visible.sync="editDrawer" :direction="direction" size="50%" @close="closeEditDrawer" :before-close="handleClose">
      <div class="content_drawer">
        <el-row>
          <el-col :span="12" style="padding:20px;">
            <el-form ref="form" :model="editForm" label-width="100px" :rules="rulesAddForm">
              <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="editForm.roleName" @input="editForm.roleName=verifyfilter('char_',editForm.roleName)"></el-input>
              </el-form-item>
              <el-form-item label="权限字符" prop="roleCode">
                <el-input v-model="editForm.roleCode" @input="editForm.roleCode=verifyfilter('char_',editForm.roleCode)"></el-input>
              </el-form-item>
              <el-form-item label="角色组" prop="rgroupId">
                <el-select v-model="editForm.rgroupId" placeholder="请选择角色组" style="width:100%">
                  <el-option :label="item.groupName" :value="item.id" v-for="item in roleGroup" :key="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="显示顺序" prop="sortNum">
                <el-input v-model="editForm.sortNum" type="number" :min="0"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-switch v-model="editForm.state" active-value="0" inactive-value="1"></el-switch>
              </el-form-item>
              <el-form-item label="备注">
                <el-input type="textarea" v-model="editForm.remark"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12" style="padding:20px;">
            <div class="right_title">菜单列表</div>
            <div class="seachRoleList">
              <el-input size="mini" placeholder="查找用户" v-model="goUser.menuname" clearable style="width:150px; margin-right:16px"></el-input>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handelGoUser">查询</el-button>
            </div>
            <el-tree :data="rightsList" :props="treeProps" show-checkbox node-key="id" :default-checked-keys="defkey" :check-strictly="checkStrictly" style="padding:0 20px" ref="treeRef" @check-change="handerCheck" @mouseenter.native="handleMouseenter"></el-tree>
          </el-col>
        </el-row>
      </div>
      <div class="demo-drawer__footer">
        <el-button type="primary" @click="editRole()" size="small">保 存</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import BaseTable from '@/components/BaseTable'

  import axios from 'axios'
  import Utils from '@/libs/Utils.js'
  export default {
    components: {
      BaseTable
    },
    data() {
      return {
        oldValA: {},
        oldValB: {},
        cargotableDataColumns: [
          { prop: 'roleName', label: '角色名称' },
          { prop: 'roleCode', label: '权限字符' },
          { prop: 'groupName', label: '角色组' },
          { prop: 'sortNum', label: '显示顺序', sortable: true },
          {
            prop: 'state',
            label: '状态',
            render(h, params) {
              if (params.row.state == '0') {
                return h('el-tag', {
                  props: {
                    size: 'mini',
                    type: 'success'
                  },
                  domProps: {
                    innerHTML: '有效'
                  }
                })
              }
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'info'
                },
                domProps: {
                  innerHTML: '无效'
                }
              })
            }
          },
          {
            label: '操作',
            fixed: 'right',
            align: 'center',
            width: 300,
            render: (h, params) => {
              return h(
                'div',

                [
                  h('el-button', {
                    props: {
                      size: 'mini'
                    },

                    domProps: {
                      // 添加标签,使用自己引入的iconfont图标
                      // innerHTML: ` <i class="iconfont icon-liebiaotubiao_jiaoseguanli" style="color:#E6A91F"></i> 角色成员`
                      innerHTML: `<span style='color:#EFAE12;'><i class='iconfont icon-1-05'></i><span  style='padding-left:5px;'>角色成员</span></span>`
                    },
                    on: {
                      click: () => {
                        this.handleRole(params.row.id)
                      }
                    }
                  }),
                  h('el-button', {
                    props: {
                      size: 'mini'
                    },

                    domProps: {
                      // 添加标签,使用自己引入的iconfont图标
                      innerHTML: `<span style='color:#0B6CD6;'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>编辑</span></span>`
                    },
                    on: {
                      click: () => {
                        this.handleEdit(params.row.id)
                      }
                    }
                  }),
                  h('el-button', {
                    props: {
                      size: 'mini'
                    },

                    domProps: {
                      // 添加标签,使用自己引入的iconfont图标
                      innerHTML: `<span style='color:#F75E5E;'><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>`
                    },
                    on: {
                      click: () => {
                        this.handleDelete(params.row.id)
                      }
                    }
                  })
                ]
              )
            }
          }
        ],
        cargotableData: [],
        // tableHeight: window.innerHeight - 210,
        loading: false,

        cargotableDataColumns1: [
          { prop: 'userName', label: '用户名称' },
          { prop: 'companyName', label: '所属公司' },
          { prop: 'deptName', label: '所属部门' },
          { prop: 'postName', label: '岗位' },
          {
            label: '操作',
            fixed: 'right',
            align: 'center',
            width: 300,
            render: (h, params) => {
              return h(
                'div',
                [
                  h('el-button', {
                    props: {
                      size: 'mini'
                    },

                    domProps: {
                      // 添加标签,使用自己引入的iconfont图标
                      innerHTML: `<span style='color:#F75E5E;display: ${this.menuArr.includes('角色成员删除') ? 'block' : 'none'}'><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>`
                    },
                    on: {
                      click: () => {
                        this.handleDeleteRoleMan(params.row.id)
                      }
                    }
                  })
                ]
              )
            }
          }
        ],
        cargotableData1: [],
        menuArr: [],
        // 查询表单
        searchForm: {
          rolename: '', // 角色名称
          roleCode: '', // 权限字符
          rgroupid: '' // 角色组id
        },
        searchInput: '', // 查询角色
        // 添加表单数据
        addForm: {
          roleName: '', // 角色名称
          roleCode: '', // 权限字符
          rgroupId: '', // 角色组
          sortNum: '', // 显示顺序
          state: true // 状态
        },
        // 添加表单验证规则
        rulesAddForm: {
          roleName: [
            { required: true, message: '请输入角色名', trigger: 'blur' }
          ],
          roleCode: [
            {
              required: true,
              message: '请输入权限字符',
              trigger: 'blur'
            }
          ],
          rgroupId: [
            {
              required: true,
              message: '请选择角色组',
              trigger: 'change'
            }
          ],
          sortNum: [
            {
              required: true,
              message: '请输入显示顺序',
              trigger: 'blur'
            }
          ]
        },
        // 编辑表单
        editForm: {
          roleName: '', // 角色名称
          roleCode: '', // 权限字符
          rgroupId: '', // 角色组
          sortNum: 0, // 显示顺序
          state: '', // 状态
          remark: '' // 备注
        },
        // 角色成员
        roleDrawer: false,
        // 添加
        addDrawer: false,
        // 编辑
        editDrawer: false,
        // 方向
        direction: 'rtl',

        // 菜单权限树形数据
        rightsList: [],
        // 树形控件的绑定对象
        treeProps: {
          children: 'children',
          label: 'nodeName'
        },
        // 默认选中的节点数据
        defkey: [],
        expankey: [],

        startpage: 1, // 开始页数
        totalPageNum: 0, // 总条数
        pageSize: 10, // 显示多少条

        query: {
          startpage: 1,
          pagesize: 10
        },

        // 角色成员分页
        roleTotalPageNum: 1, // 总页数
        rolepageSize: 10, // 显示多少页
        rolePageNum: 0, // 当前页

        roleGroup: [], // 角色组数据
        roleId: '', // 角色成员id

        // 菜单列表 查找用户
        goUser: {
          id: '',
          menuname: ''
        },
        checkStrictly: true,
        newArr: [],
        btnId: [] // 按钮id
      }
    },

    computed: {
      tableHeight() {
        return this.$store.state.tableHeight
      },
      chooseTreeId() {
        this.rightsList.map(item => item.isBind)
      }
    },
    created() {
      // this.getTabeDate()
      // 获取角色组
      // this.getRoleGroup()
    },
    async activated() {
      // var menuArr = []
      // var menuId = ""
      // if(localStorage.getItem("menuArr")){
      //   menuArr = JSON.parse(localStorage.getItem("menuArr"))
      //
      // }
      // menuArr.map(item=>{
      //   item.children.map(v=>{
      //     if(window.location.href.includes(v.url)){
      //       menuId = v.id
      //     }
      //   })
      // })
      //
      // if(menuId){
      //   this.menuArr = []
      //   await this.$http.get(`/${this.$ServiceName}/api/external/sysmenubtn/listresourcebtnbyid?menuId=${menuId}`,{ timeout: 30000,})
      //           .then(res => {
      //             res.data.data.map(item=>{
      //               this.menuArr.push(item.RESOURCENAME)
      //             })
      //           }).catch((error)=>{})
      // }
      // if(this.$store.state.app.searchResouce =="menu"){
      //   this.searchForm = {
      //     rolename: '', //角色名称
      //     roleCode: '', //权限字符
      //     rgroupid:''
      //   }
      //   this.getTabeDate()
      //   // 获取角色组
      //   this.getRoleGroup()
      // }
      this.getTabeDate()
      // 获取角色组
      this.getRoleGroup()
    },
    methods: {
      // 获取角色表格信息
      async getTabeDate() {
        this.loading = true
        const res = await this.$http.get(
          `/${this.$ServiceName}/api/external/sysrole/queryall`,
          {
            params: Object.assign({}, this.query, this.searchForm)
          }
        )

        if (res.data.code != '0000') {
          this.loading = false
          return this.$message.error(res.data.msg)
        }

        this.cargotableData = res.data.data['pages']

        this.totalPageNum = res.data.data['totalNum'] // 总条数
        this.startPage = res.data.data['pageNum'] // 当前页
        this.loading = false
      },

      // 查询表单
      async searchRoleForm() {
        // console.log(this.searchForm)
        this.loading = true
        const res = await this.$http.get(
          `/${this.$ServiceName}/api/external/sysrole/queryall?startpage=${this.startPage}&pagesize=${this.pageSize}&rolename=${this.searchForm['rolename']}&roleCode=${this.searchForm['roleCode']}&rgroupid=${this.searchForm.rgroupid}`
        )
        console.log('------1');
        console.log(res);
        if (res.data.code != '0000') {
          this.loading = false
          return this.$message.error(res.data.msg)
        }
        this.loading = false
        this.cargotableData = res.data.data['pages']
        this.totalPageNum = res.data.data['totalNum'] // 总条数
        this.startage = res.data.data['pageNum'] // 当前页
      },

      // 添加角色显示抽屉
      handleAdd() {
        this.addDrawer = true
        this.addForm = {
          state: '0',
          roleName: '',
          roleCode: '',
          rgroupId: '',
          sortNum: ''
        }
        this.oldValA = {
          state: '0',
          roleName: '',
          roleCode: '',
          rgroupId: '',
          sortNum: ''
        }
      },
      // 添加角色提交
      onSubmit() {
        this.$refs['roleFormRef'].validate(async valid => {
          if (valid) {
            const res = await this.$http.post(
              `/${this.$ServiceName}/api/external/sysrole/add`,
              this.addForm
            )

            if (res.data.code != '0000') {
              return this.$message.error(res.data.msg)
            }
            this.$message.success(res.data.msg)
            this.addDrawer = false
            this.getTabeDate()
          } else {
            return false
          }
        })
      },

      // 角色成员
      async handleRole(id) {
        this.loading = true
        this.roleId = id
        const res = await this.$http.get(
          `/${this.$ServiceName}/api/external/sysrole/listuserbyrole?startpage=${this.rolePageNum}&pagesize=${this.rolepageSize}&id=${id}`
        )
        if (res.data.code != '0000') {
          this.loading = false
          return this.$message.error(res.data.msg)
        }
        this.cargotableData1 = res.data.data['pages'] // 渲染数据
        this.roleTotalPageNum = res.data.data.totalNum // 总页数
        this.rolePageNum = res.data.data.pageNum // 当前页
        this.loading = false

        this.roleDrawer = true
        // 不关联
        // this.checkStrictly = true;
      },
      // 根据id编辑角色数据
      async handleEdit(id) {
        this.goUser.id = id // 把id 传给菜单列表树 查询id里
        //
        // 设置为不关联
        this.checkStrictly = true
        const res = await this.$http.get(
          `/${this.$ServiceName}/api/external/sysrole/getroleinfobyid?id=${id}`
        )
        if (res.data.code != '0000') {
          return this.$message.error(res.data.msg)
        }

        this.editForm = res.data.data.roleInfo
        this.rightsList = res.data.data.treeMenu
        const idList = []
        this.rightsList.map((item) => {
          item.children.map((childItem) => {
            childItem.children.map((grandItem) => {
              idList.push(grandItem.id)
            })
          })
        })
        this.$set(this.editForm, 'btnId', idList.join(','))

        setTimeout(() => {
          this.oldValB = JSON.parse(JSON.stringify(this.editForm))
        }, 600)
        // 获取tree选中的id
        const chooseId = this.treeDataGetnode(this.rightsList)
        // this.checkStrictly = false;
        // console.log(chooseId)
        this.defkey = chooseId
        this.editDrawer = true
      },
      // 根据id删除用户角色
      async sub(id) {
        const res = await this.$http.delete(
          `/${this.$ServiceName}/api/external/sysrole/deletebyid?id=${id}`
        )
        if (res.data.code != '0000') {
          return this.$message.error(res.data.msg)
        }
        this.$message.success('删除成功')
        this.getTabeDate()
      },

      // 监听pageSize改变事件
      async handleSizeChange(val) {
        this.query.pagesize = val
        this.getTabeDate()
      },
      // 分页 监听页码值改变
      async handleCurrentChange(val) {
        this.query.startpage = val
        this.getTabeDate()
      },
      // 角色成员分页
      handleRoleSizeChange(newSize) {
        this.rolepageSize = newSize
        this.handleRole(this.roleId)
      },
      handleRoleCurrentChange(newPage) {
        this.rolePageNum = newPage
        this.handleRole(this.roleId)
      },
      // 抽屉关闭提示
      handleClose(done) {
        let oldV = {}
        let newV = {}
        if (this.addDrawer) {
          oldV = this.oldValA
          newV = this.addForm
        }
        if (this.editDrawer) {
          oldV = this.oldValB
          newV = this.editForm
        }
        if (!Utils.compareData(oldV, newV)) {
          this.$confirm('修改的数据未保存，是否关闭？')
            .then(_ => {
              this.rolePageNum = 1
              done()
            })
            .catch(_ => { })
        } else {
          this.rolePageNum = 1
          done()
        }
      },
      // 获取角色组
      async getRoleGroup() {
        const res = await this.$http.get(
          `/${this.$ServiceName}/api/external/publics/listrolegroup`
        )

        if (res.data.code != '0000') {
          return this.$message.error(res.data.msg)
        }
        this.roleGroup = res.data.data
      },

      // 根据角色查询用户列表
      async searchRoleName() {
        this.rolePageNum = 1
        this.loading = true
        const res = await this.$http.get(
          `/${this.$ServiceName}/api/external/sysrole/listuserbyrole?startpage=${this.rolePageNum}&pagesize=${this.roleTotalPageNum}&id=${this.roleId}&username=${this.searchInput}`
        )
        if (res.data.code != '0000') {
          this.loading = false
          return this.$message.error(res.data.msg)
        }
        this.cargotableData1 = res.data.data['pages'] // 渲染数据
        this.roleTotalPageNum = res.data.data.totalNum // 总页数
        this.rolePageNum = res.data.data.pageNum // 当前页
        this.loading = false
      },

      // 修改角色
      async editRole() {
        this.$refs['form'].validate(async valid => {
          if (valid) {
            const key = [
              ...this.$refs.treeRef.getCheckedKeys(),
              ...this.$refs.treeRef.getHalfCheckedKeys()
            ]
            this.editForm.menuId = key.join(',')
            const params = {}
            params.id = this.editForm.id
            params.roleName = this.editForm.roleName
            params.roleCode = this.editForm.roleCode
            params.rgroupId = this.editForm.rgroupId
            params.sortNum = this.editForm.sortNum
            params.state = this.editForm.state
            params.remark = this.editForm.remark
            params.menuId = this.editForm.menuId
            params.btnId = this.editForm.btnId

            const res = await this.$http.put(
              `/${this.$ServiceName}/api/external/sysrole/update`,
              params
            )
            // console.log(res)
            if (res.data.code != '0000') {
              return this.$message.error(res.data.msg)
            }
            this.$message.success('修改成功！')
            this.getTabeDate()
            // 设置不关联
            this.checkStrictly = true
            this.editDrawer = false
          }
        })
      },

      // 获取el-treebind为true的id
      treeDataGetnode(data) {
        var res = []
        // var dataRes = [];
        var child = function(v) {
          if (typeof v.children !== 'undefined' && v.children.length > 0) {
            for (var i = 0; i < v.children.length; i++) {
              if (v.children[i].bind) {
                res.push(v.children[i].id)
                child(v.children[i])
              }
            }
          }
        }
        for (var k = 0; k < data.length; k++) {
          if (data[k].bind) {
            res.push(data[k].id)
            //  dataRes.push({resourceId:v.children[i].id,nodeType:v.children[i].nodeType})
          }
          if (
            typeof data[k].children !== 'undefined' &&
                  data[k].children.length > 0
          ) {
            child(data[k])
          }
        }
        const set = Array.from(new Set(res))
        // let set = Array.from(new Set(dataRes));
        console.log(set)
        return set
      },

      getRoleBtn(data) {
        data.forEach(item => {
          if (item.nodeType == '03') {
            this.newArr.push(item.id)
          }
          if (item.children) {
            this.getRoleBtn(item.children)
          }
        })
        console.log(this.newArr)
        const set = Array.from(new Set(this.newArr))
        // console.log(set);
        return set
      },
      // 监听编辑角色关闭事件
      closeEditDrawer() {
        this.defkey = []
        this.editDrawer = false // 关闭窗口
        console.log(this.checkStrictly)
      },
      // 监听添加角色关闭事件
      addDrawerClose() {
        this.$refs.roleFormRef.clearValidate()
      },
      handerCheck(checkedNodes) {
        this.newArr = [] // 点击先清空
        const arrCheckedNodes = []
        this.checkStrictly = false
        this.editForm.btnId = this.$refs.treeRef.getCheckedKeys().join(',')
      },

      // 根据选择框整体删除
      async handleDelete(id) {
        const confirmRes = await this.$confirm(
          '此操作将永久删除该角色数据, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(err => {})
        if (confirmRes !== 'confirm') {
          return this.$message.info('已经取消删除')
        }
        // console.log('删除整体')
        this.sub(id)
      },
      // 删除角色成员
      handleDeleteRoleMan(id) {
        this.$confirm(
          '此操作将永久删除该角色成员数据, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          this.$http.delete(
            `/${this.$ServiceName}/api/external/sysrole/deleteuserrole?id=${id}`
          ).then(res => {
            if (res.data.code != '0000') {
              this.$message.error(res.data.msg)
            } else {
              this.$message.success('删除成功')
              this.searchRoleName()
            }
          })
        }).catch(err => {})
        if (confirmRes !== 'confirm') {
          return this.$message.info('已经取消删除')
        }
        // console.log('删除整体')
        this.sub(id)
      },
      // 查找用户
      async handelGoUser() {
        console.log(this.goUser)
        this.checkStrictly = true
        const res = await this.$http.get(
          `/${this.$ServiceName}/api/external/sysrole/listmenu`,
          {
            params: this.goUser
          }
        )
        console.log(res)
        if (res.data.code != '0000') {
          return this.$message.error(res.data.msg)
        }
        this.rightsList = res.data.data
      },
      handleMouseenter() {
        this.checkStrictly = false
        // console.log('移入事件')
      }
    }
  }
</script>

<style lang="less" scoped>
  .container {
    //表单盒子
    .form_box {
      padding: 20px;
      box-sizing: border-box;
    }

    // 查询表单
    .search_form {
      border: 1px solid #ebeef5;
      background-color: #fff;
      color: #303133;
      border-radius: 4px;
      font-size: 14px;
      color: #606266;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      .el-input {
        width: 150px;
      }
      .roleCode {
        margin-left: 16px;
      }
      .btn_search {
        margin-left: 16px;
        background-color: #338ce8;
      }
    }

    //操作按钮
    .roleBtn,
    .editBtn,
    .deleteBtn {
      font-size: 13px;
      color: #606266;
      border-color: transparent;
      background: transparent;
    }

    // 抽屉头部样式

    /deep/ .el-drawer__header {
      font-size: 16px;
      color: #303133;
      background-color: #f5f7fa;
      margin-bottom: 0 !important;
      height: 50px;
      line-height: 50px;
      padding: 0 16px !important;
    }
    /deep/.el-drawer__close-btn {
      display: none;
    }
    .right_title {
      padding: 0 20px;
      box-sizing: border-box;
      font-size: 14px;
      color: #606266;
      height: 41px;
      line-height: 41px;
      background-color: #f5f7fa;
      border: 1px solid #e1e4eb;
    }
    /deep/ .el-button--primary {
      background-color: #338ce8;
      border-color: #338ce8;
    }
    //修改角色提交按钮
    /deep/ .demo-drawer__footer {
      text-align: right;
      padding-right: 1rem;
      border-top: 1px solid #c8cfde;
      background-color: #f5f7fa;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      line-height: 50px;
      z-index: 100;
    }
    //角色成员分页盒子
    .record {
      padding: 10px 20px;
      font-size: 13px;
      color: #909399;
      text-align: right;
      padding-right: 1rem;
      border-top: 1px solid #c8cfde;
      background-color: #f5f7fa;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }
    /deep/ .el-drawer__body {
      overflow-y: auto;
      padding-bottom: 100px;
    }

    .footer_btn {
      text-align: right;
      height: 50px;
      line-height: 50px;
    }

    //分页
    .card_pagination {
      text-align: right;
      padding: 10px 20px;
      background: #ffffff;
    }
    //   /deep/.el-pagination.is-background .btn-next,
    //   /deep/ .el-pagination.is-background .btn-prev,
    //   /deep/ .el-pagination.is-background .el-pager li {
    //     background: #ffffff;
    //     border: 1px solid #e1e4eb;
    //     border-radius: 3px;
    //     border-radius: 3px;
    //   }
    .search_input {
      height: 50px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      .el-input {
        width: 150px;
      }
    }
    /deep/.el-input el-input-group el-input-group--append {
      width: 191px !important;
    }
    // 查询列表
    .seachRoleList {
      display: flex;
      align-items: center;
      height: 50px;
      padding: 0 20px;
      border-left: 1px solid #e1e4eb;
      border-right: 1px solid #e1e4eb;
      border-bottom: 1px solid #e1e4eb;
      .el-input {
        width: 131px;
      }
    }
  }
  .box {
    border: 1px solid #e1e4eb;
    border-radius: 4px 4px 0 0;
    border-top: none;
  }
  /deep/ .el-tree {
    overflow-y: scroll;
    height: calc(100vh - 200px);
  }
</style>
